<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content=" Zoe" />
<meta name="Copyright" content="" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>我的订单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/styles-temp1.css" type="text/css">
<link rel="stylesheet" href="css/style_2.css" media="screen" type="text/css" />
<!--必要样式-->
<link href="css/style_1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min_1.js"></script>
<script type="text/javascript" src="js/script_1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/fetch.min.js"></script>
</head>
<body >
<div class="wrap bc">
  <div class="title tc pr top"> <span class="back-btn"></span>订单列表
  </div>
  <div class="list"  id="orderListId">
    <ul>
      <li v-for="order in orders">
        <p>订单记录:{{order.name}}</p>
        <p>
          {{order.detail}}
        </p>
        <p>订单金额:{{order.total}} 元</p>
        <p>支付状态:{{order.status}}</p>
        <p>订单类型:{{order.type}}</p>

          <div v-if="order.restaurantMessage==''||order.restaurantMessage==null">
            评论订单:
            <input v-model="comment"/>
            评论服务员:
            <select v-model="employId">
              <option v-for="employ in employs" :value="employ.id">
                 {{employ.name}}
              </option>
            </select>
            满意度:
            <select v-model="employStatus">
               <option value="五星">五星</option>
               <option value="四星">四星</option>
               <option value="三星">三星</option>
               <option value="二星">二星</option>
               <option value="一星">一星</option>
            </select>

            <input v-model="commentEmploy"/>
            <button v-on:click="addOrderComment(order.id,comment,employId,commentEmploy,employStatus)">评价</button>
          </div>
          <div v-if="order.restaurantMessage!=''&&order.restaurantMessage!=null">
            <p style="color: #0DB8DF">对餐厅已评价</p>
          </div>



        <p style="color: red" v-if="order.status=='待支付' && order.type=='加急订单'">已进行加急,商家正在全力备货</p>
        <button v-if="order.status=='待支付' && order.type=='普通订单'" v-on:click="orderUrgent(order.id)">
          订单加急
        </button>
        <div v-if="order.status=='待支付'">
           <span>订单支付</span>
           <span>金额:{{order.total}}</span>
           <button v-on:click="confirmPay(order.id)">确认支付</button>
        </div>

      </li>
    </ul>
  </div>
</div>
<script>
  var url = "/Fore/order/list";
  new Vue({
    el:'#orderListId',
    data:{
      orders:[],
      comment:"",
      employId:"",
      commentEmploy:"",
      employStatus:"",
      employs:[]
    },
    mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
      self=this
      fetch(url).then(function(response) {
        response.json().then(function (jsonObject) {
          self.orders = jsonObject
        })
      })
      fetch("/Fore/employ/list").then(function(response) {
        response.json().then(function (jsonObject) {
          self.employs = jsonObject
        })
      })
    },
     methods:{
       addOrderComment:function(id,comment,employId,commentEmploy,employStatus){
         fetch("/Fore/order/addComment?id="+id+"&comment="+comment+"&employId="+employId+"&commentEmploy="+commentEmploy+"&employStatus="+employStatus).then(function(response) {
           window.location.reload();
         })
       },
       orderUrgent:function (id) {
         fetch("/Fore/order/urgent?id="+id).then(function(response) {
           window.location.reload();
         })
       },
       confirmPay:function (id) {
         fetch("/Fore/order/pay?id="+id).then(function(response) {
           window.location.reload();
         })
       }
     }
  })
</script>
<script type="text/javascript" src="js/script.js">
</script>


<style type="text/css">
.top_bar{position:fixed;z-index:900;bottom:-1px;left:0;right:0;}
.top_menu{
	border-top:1px solid #b3b3b3;width:100%;height:40px;margin:0;padding:0;
	
	background:rgba(255, 255, 255, 0.7);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:-o-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
	background:gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
}
.top_bar .top_menu>li{
	position:relative;text-align:center;display:inline-block;width:25%;float:left;
	
	background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:-o-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -o-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
	background:gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
}
.top_bar .top_menu li a label{padding:3px 0 0 3px;font-size:12px;overflow:hidden;}
.top_menu>li:first-child{background:none;}
.top_bar .top_menu>li>a{height:40px;line-height:40px;display:block;text-align:center;color:#4f4d4f;text-shadow:0 1px rgba(255, 255, 255, 0.3);text-decoration:none;border-top:1px solid #f9f9f9;}
.top_bar .top_menu>li>a p{overflow:hidden;margin:0 0 0 0;font-size:12px;display:block!important;line-height:18px;text-align:center;}
.top_bar .top_menu>li>a img{padding:0;height:20px;width:20px;color:#fff;line-height:40px;vertical-align:middle;}
.top_bar .top_menu>li>a:hover,.top_bar .top_menu>li>a:active{background-color:#CCCCCC;}
</style>
<div style="text-align:center;clear:both;">
  <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 
  <script src="/follow.js" type="text/javascript"></script> 
</div>
<div class="top_bar">
  <nav>
    <ul id="top_menu" class="top_menu">
      <li><a href="index.html"><img src="images/plugmenu6.png">
        <label>菜单</label>
      </a></li>
      <li><a href="mypocket.html"><img src="images/plugmenu8.png">
        <label>购物车</label>
      </a></li>
      <li><a href="personal.html"><img src="images/person.png">
        <label>个人中心</label>
      </a></li>
      <li><a href="#"><img>
        <label>餐厅介绍</label>
      </a></li>
    </ul>
  </nav>
</div>
</body>
</html>